<style lang="less">
    
</style>

<template>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" >
        <FormItem label="姓名" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
        </FormItem>
        <FormItem label="性别" prop="gender">
            <RadioGroup v-model="formValidate.gender">
                <Radio label="0">保密</Radio>
                <Radio label="1">男</Radio>
                <Radio label="2">女</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="联系方式" prop="mobile" >
            <Input v-model="formValidate.mobile" placeholder="请输入联系方式"></Input>
        </FormItem>
        <FormItem label="所属机构" prop="organ" >
            <Select v-model="formValidate.organ" placeholder="请选择所属机构">
                <Option v-for="item in organList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
        </FormItem>
    </Form>
</template>

<script>
import http from '../../../libs/http';
export default {
    data () {
        const validePhone = (rule, value, callback) => {
            var re = /^1[3|4|5|7|8][0-9]{9}$/;
            if (!re.test(value)) {
                callback(new Error('请输入正确格式的手机号'));
            } else {
                callback();
            }
        };
        return {
            organList: [],
            formValidate: {
                id:'',
                name: '',
                gender: '0',
                mobile: '',
                organ: ''
            },
            ruleValidate: {
                name: [
                    { required: true, message: '联系人不能为空', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '联系方式不能为空', trigger: 'blur' },
                    { validator: validePhone}
                ],
                organ: [
                    { type:'number', required: true, message: '请选择所属机构', trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    //提交后台
                    var data = {
                        id: this.formValidate.id,
                        name: this.formValidate.name,
                        contact: this.formValidate.contact,
                        mobile: this.formValidate.mobile,
                        organ_id: this.formValidate.organ
                    }
                    this.apiPost('admin/orgMember/update', data).then((res) => {
                        if (res.code != 200) {
                            this.handleError(res);
                        } else {
                            this.$Message.success('添加机构成员成功');
                            this.handleReset(name);
                            this.$emit('closeAddWindow');
                        }
                    })
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        getOrganList () { //获取机构列表
            var that = this;
            var url = 'admin/organization/index';
            this.apiGet(url).then((res) => {
                if(res.code != 200) {
                    this.handleError(res);
                } else {
                    that.organList = res.data.list;
                }
            });
        },
        getInfo (id) {
            var that = this;
            var url = 'admin/orgMember/read/' + id;
            this.apiGet(url).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    that.formValidate = {
                        id: res.data.id,
                        name: res.data.name,
                        mobile: res.data.mobile,
                        gender: res.data.gender,
                        organ: res.data.organ_id
                    }
                }
            })
        }
    },
    mixins: [http]
}
</script>
